<template>
	<view class="list" v-for="item in data" :key="item._id">
		<view class="header">
			<view class="flex">
				<cloud-image class="avatar" height="100rpx" width="100rpx" borderRadius="50%" :src="item.avatar?.url || defaultImg"></cloud-image>
				<view class="nickname">
					<text>{{item.nickname}}</text>
					<text style="font-size: 32rpx;color: #999;">{{item.createTime}}</text>
				</view>
			</view>
			<view>
				<slot name="del" :item="item"></slot>
			</view>
		</view>
		<view style="margin: 10rpx 0;">{{item.title}}</view>
		<view class="img-list">
			<image class="img" v-for="(imgItem,imgIndex) in item.image" :key="imgIndex" :src="imgItem"
				@click="previewImage(item.image,imgIndex)" mode="aspectFill">
			</image>
		</view>
		<view style="display: flex;margin-top: 20rpx;">
			<u-icon name="map"></u-icon><text class="address">{{item.address}}</text>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		data:Array,
		require:true
	})
	const previewImage = (urls,current) => {
		uni.previewImage({
			urls,current
		})
	}
	const defaultImg = 'https://iknow-pic.cdn.bcebos.com/e61190ef76c6a7ef32ad14b9fafaaf51f2de66a2'
</script>

<style lang="scss">
	.avatar{
		border-radius: 50%;
	}
	.list{
		margin-bottom: 30rpx;
		border-bottom: 1rpx solid #eee;
		border-radius: 4rpx;
		width: 100%;
		padding: 20rpx;
		font-size: 34rpx;
		.header{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			.nickname{
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
			}
		}
		.img-list{
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-row-gap: 10rpx;
			width: 100%;
			margin-top: 20rpx;
			.img{
				width: 220rpx;
				height: 220rpx;
				border-radius: 4rpx;
			}
		}
		.address{
			margin-left: 20rpx;
		}
	}
</style>